<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>IHP Guide</title>

    <link rel="shortcut icon" type="image/x-icon" href="/ihp-logo.svg"/>
    <link rel="stylesheet" href="bootstrap.css" crossorigin="anonymous"/>
    <link rel="stylesheet" href="search.css" />
    <script defer data-domain="ihp.digitallyinduced.com" src="https://plausible.io/js/plausible.js"></script>
  </head>
  <body class="d-flex">
        <nav class="navbar  navbar-light" id="mobile-navbar">
            <a class="navbar-brand" href="#">
                <span class="nav-logo">
                    <img src="images/ihp-logo-readme.svg" style="height: 2em;" />
                </span>
            </a>
            <button class="navbar-toggler" type="button" onclick="document.querySelector('.nav-column').classList.toggle('visible')">
                <span class="navbar-toggler-icon"></span>
            </button>
        </nav>

        <div class="text-right nav-column navbar-collapse">
            <div class="nav-logo">
                <img src="images/ihp-logo-readme.svg" style="width:13ch;" />
            </div>

            <nav class="nav flex-column primary-nav">
                <a class="nav-link headline" href="index.html">Getting Started</a>
                <a class="nav-link secondary" href="index.html">Intro</a>
                <a class="nav-link secondary" href="installation.html">Installing IHP</a>
                <a class="nav-link secondary" href="your-first-project.html">Your First Project</a>
                <a class="nav-link secondary" href="examples.html">Examples</a>

                <a class="nav-link headline" href="architecture.html">The Basics</a>
                <a class="nav-link secondary" href="architecture.html">Architecture</a>
                <a class="nav-link secondary" href="naming-conventions.html">Naming Conventions</a>
                <a class="nav-link secondary" href="routing.html">Routing</a>
                <a class="nav-link secondary" href="controller.html">Controller & Actions</a>
                <a class="nav-link secondary" href="view.html">Views & JSON</a>
                <a class="nav-link secondary" href="hsx.html">HSX</a>
                <a class="nav-link secondary" href="form.html">Forms</a>
                <a class="nav-link secondary" href="validation.html">Validation</a>
                <a class="nav-link secondary" href="session.html">Session</a>
                <a class="nav-link secondary" href="javascript:alert('This cookie section is not ready yet')">Cookies</a>
                <a class="nav-link secondary" href="scripts.html">Scripts</a>
                <a class="nav-link secondary" href="debugging.html">Debugging</a>
                <a class="nav-link secondary" href="testing.html">Testing</a>

                <a class="nav-link secondary" href="editors.html">Editors & Tooling</a>
                <a class="nav-link secondary" href="helpful-tips.html">Helpful Tips <br />& Special Haskell Syntax</a>

                <a class="nav-link headline" href="mail.html">Advanced</a>


                <a class="nav-link secondary" href="mail.html">Sending Mail</a>
                <a class="nav-link secondary" href="file-storage.html">File Storage & Uploads</a>
                <a class="nav-link secondary" href="jobs.html">Jobs</a>
                <a class="nav-link secondary" href="updating.html">Updating IHP</a>
                <a class="nav-link secondary" href="auto-refresh.html">Realtime Views with Auto Refresh</a>
                <a class="nav-link secondary" href="websockets.html">WebSockets</a>
                <a class="nav-link secondary" href="logging.html">Logging</a>
                <a class="nav-link secondary" href="package-management.html">Package Management</a>
                <a class="nav-link secondary" href="deployment.html">Deployment</a>
                <a class="nav-link secondary" href="design-goals.html">IHP Design Goals</a>
                <a class="nav-link secondary" href="server-side-components.html">Server-Side Components</a>
                <a class="nav-link secondary" href="ihp-pro.html">IHP Pro</a>
                <a class="nav-link secondary" href="stripe.html">Payments with Stripe</a>
                <a class="nav-link secondary" href="config.html">Custom Configuration</a>


                <a class="nav-link headline" href="tailwindcss.html">Frontend</a>
                <a class="nav-link secondary" href="tailwindcss.html">Tailwind CSS</a>
                <a class="nav-link secondary" href="elm.html">Elm</a>
                <a class="nav-link secondary" href="purescript.html">PureScript</a>
                <a class="nav-link secondary" href="modal.html">Modal</a>
                <a class="nav-link secondary" href="npm.html">Using NPM</a>
                <a class="nav-link secondary" href="assets.html">Static Assets</a>
                <a class="nav-link secondary" href="realtime-spas.html">Realtime Single-Page Apps <br />& IHP DataSync</a>
                <a class="nav-link secondary" href="javascript:alert('The frontend section is coming soon')">Form Customization</a>

                <a class="nav-link headline" href="database.html">Database</a>
                <a class="nav-link secondary" href="database.html">Basics</a>
                <a class="nav-link secondary" href="relationships.html">Relationships</a>
                <a class="nav-link secondary" href="querybuilder.html">Query Builder</a>
                <a class="nav-link secondary" href="database-migrations.html">Migrations</a>


                <a class="nav-link headline" href="authentication.html">Auth</a>
                <a class="nav-link secondary" href="authentication.html">Login & Logout</a>
                <a class="nav-link secondary" href="authorization.html">Authorization</a>
                <a class="nav-link secondary" href="oauth.html">OAuth</a>

                <a class="nav-link headline" href="seo.html">SEO</a>

                <a class="nav-link headline" href="recipes.html">Recipes</a>
                <a class="nav-link headline" href="troubleshooting.html">Troubleshooting</a>

                <a class="nav-link headline" href="#">LINKS</a>
                <a class="nav-link" href="https://github.com/digitallyinduced/ihp" target="_blank">GitHub</a>
                <a class="nav-link" href="https://www.youtube.com/playlist?list=PLenFm8BWuKlS0IaE31DmKB_PbkMLmwWmG" target="_blank">IHP Casts</a>
                <a class="nav-link" href="https://ihp.digitallyinduced.com/api-docs/" target="_blank">API Docs</a>
                <a class="nav-link" href="https://digitallyinduced.us10.list-manage.com/subscribe?u=03763c34fa6aaa4c52edfe6ce&id=a09e22a2d3" target="_blank">Newsletter</a>
                <a class="nav-link" href="https://forum.ihpapp.com/" target="_blank">IHP Forum</a>
                <a class="nav-link" href="https://stackoverflow.com/questions/tagged/ihp" target="_blank">StackOverflow #ihp</a>

                <div class="mt-2">
                    <a class="github-button" href="https://github.com/digitallyinduced/ihp" data-color-scheme="no-preference: light; light: light; dark: dark;" data-size="large" data-show-count="true" aria-label="Star digitallyinduced/ihp on GitHub">Star</a>
                </div>
            </nav>
        </div>
        <main>
            {{& output }}
        </main>

        <div id="search-container">
            <div id="search">
            </div>
        </div>



    <style>
        html, body {
            min-height: 100%;
            color: #073642;
        }

        * {
            -webkit-font-smoothing: antialiased;
            text-rendering: optimizeLegibility;
            scroll-behavior: smooth;
        }

        .nav-logo-lambda, .nav-logo-name {
            display: inline-block;
        }

        .nav-logo-lambda {
            font-size: 4rem;
            font-weight: 600;
        }

        .nav-logo-name {
            font-size: 2rem;
        }

        .nav-logo {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            color: #073642;
        }

        .nav-column {
            background-color: hsla(192, 81%, 5%, 0.04);
            padding-top: 2rem;
            position: sticky;
            height: 100vh;
            top: 0;
        }

        main {
            padding: 1rem;
            width: 100%;
        }

        .primary-nav .nav-link {
            font-size: 12px;
            padding-top: 4px;
            padding-bottom: 4px;
            padding-right: 0;
            transition: all 0.05s;
        }

        .primary-nav .nav-link.headline {
            font-weight: 700;
            color: #073642;
            text-transform: uppercase;
            margin-top: 20px;

        }

        .primary-nav .nav-link.secondary {
            font-weight: 500;
            color: hsla(192, 81%, 26%, 0.8);
            text-transform: initial;
        }

        .primary-nav .nav-link.secondary:hover {
            color: #073642;
        }

        .primary-nav .nav-link.secondary.active {
            color: #268BD2;
        }

        a {
            color: hsla(192, 81%, 26%, 1);
        }

        h1, h2, h3, h4, h5 { color: #073642; }

        .source-code {
          background-color: #002b36;

          border-radius: 3px;
        }
        pre > code {
          color: #839496 !important;
          background-color: #002b36;
          display: block;
          padding: 1rem;
        }

        code {
          background-color: rgba(0, 43, 54, 0.11);
          color: #002b36 !important;
          padding: 2px;
          padding-left: 4px;
          padding-right: 4px;
          border-radius: 2px;
        }

        code .cr {
          color: #93a1a1 !important;
          font-weight: bold;
        }

        code .kw, code .kw, code .kw { color: #859900; }
        code .st { color: #2aa198; }

        pre { overflow: scroll; }

        img { max-width: 100%; }

        /* TOC */
        main > h1 + ul { padding-left: 0; list-style: none; padding-left: 0; }
        main > h1 + ul a {
            color: #839496;
            font-size: 12px;
        }

        main h2, main h3, main h4 { margin-top: 4rem; }
        main h2 + h3 { margin-top: 0 }

        #mobile-navbar {
            position: absolute;
            width: 100%;
        }

        .nav-column {
            display: none;
            transition: all 0.2s;
            padding-right: 20px;
            overflow-y: scroll;
        }
        .nav-column.visible {
            display: block;
            position: absolute;
            width: 100%;
            height: fit-content;
            margin-top: 64px;
            padding-top: 0;
            z-index: 1000;
        }
        .nav-column.visible, #mobile-navbar {
            background-color: #f5f6f6;
        }
        .nav-column.visible .nav-logo { display: none }

        #mobile-navbar .nav-logo .nav-logo-lambda { font-size: 2rem; }
        #mobile-navbar .nav-logo .nav-logo-name { font-size: 1rem; }

        main { padding-top: 74px; }
        @media (min-width: 768px) {
            #mobile-navbar { display: none }
            .nav-column {
                display: block;
                width: 25%;
                max-width: 25%;
                padding-right: 4rem;
            }

            main {
                width: 75%;
                max-width: 800px;
                padding: 4rem;
            }
        }

        summary h3 { vertical-align: sub }

        .next-button {
            background-color: hsla(192, 81%, 26%, 1);
            color: white !important;
            text-decoration: none !important;
            padding-top: 0.5rem;
            padding-bottom: 0.5rem;
            padding-left: 1rem;
            padding-right: 1rem;
            margin-top: 1rem;
            display: inline-block;
            border: 1px solid hsla(192, 81%, 19%, 0.1);
            font-weight: 500;
            border-radius: 8px;
        }

        .next-button:hover {
            background-color: hsla(192, 81%, 26%, 0.8)
        }

        #search-container {
            position: absolute;
            top: 80px;
            right: 1rem;
        }

        @media (min-width: 768px) {
            .DocSearch.DocSearch-Button {
                margin-left: 0;
                position: fixed;
            }
            #search-container {
                margin-top: 70px;
                position: initial;
            }
        }
    </style>

    <script>
        /* Add bootstrap css class table to all markdown tables */
        var tables = document.querySelectorAll('table');
        for (let table of tables) {
          table.classList.add('table', 'table-sm', 'table-striped');
        }
    </script>
    <script>
        /* Add css class active to current navigation item */
        var activeNavItem = document.querySelector('.nav-link.secondary[href="' + location.pathname.split('/').pop() + '"]');
        if (activeNavItem) { activeNavItem.classList.add('active'); }

        /* Add css class to "Next: ..." links */
        var links = document.querySelectorAll('a');
        for (let link of links) {
            if (link.innerText.indexOf('Next: ') === 0) {
                link.classList.add('next-button');
            }
            if (link.href && link.href.indexOf('/api-docs/') > 0) {
                link.target = '_blank';
            }
        }
    </script>
    <script async defer src="https://buttons.github.io/buttons.js"></script>
    <script src="instantclick.js" data-no-instant></script>
    <script src="spoilify.js"></script>
    <script data-no-instant>InstantClick.init(); spoilify(); InstantClick.on('change', spoilify);</script>

    <script type="text/javascript" src="search.js"></script>
  </body>
</html>
